<!--
 * @Author: 徐伟杰
 * @Date: 2022-11-03 10:03:27
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-12-27 16:40:36
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <div>
    <view class="cu-modal bottom-modal"
          :class="modalName=='bottomModal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-red"
                @tap="hideModal">取消</view>
          <view class="action text-green"
                @tap="sureModal">确定</view>
        </view>
        <view class="padding-xl"
              style="padding-bottom: 100rpx; max-height: 600rpx; overflow-y: auto">
          <view v-for="(item, index) in propleList"
                :key="index">
            <view class="flex justify-between">
              <checkbox-group @change="checkBtn(item)">
                <checkbox :disabled="item.active"
                          style="transform:scale(0.7)"
                          :checked="item.checked" />{{item.name}}
              </checkbox-group>
              <view :class="item.active ? 'text-red' : 'text-blue'"
                    class="tips">{{item.tips}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  props: {
    modalName: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      propleList: []
    }
  },
  watch: {
    modalName: {
      handler (newVal) {
        if (newVal == 'bottomModal') {
          this.propleList = this.list.map(item => {
            item.checked = false
            return item
          })
        }
      },
      immediate: false
    },
  },
  methods: {
    hideModal () {
      this.$emit('close', null)
    },
    sureModal () {
      this.$emit('submit', this.propleList)
    },
    checkBtn (item) {
      item.checked = !item.checked
    }
  }
}
</script>

<style>
.tips {
  width: 300rpx;
  text-align: right;
}
</style>